<template>
  <div class="mine">
    <div class="mine-center-info">
      <a class="mine-set" href="javascript:void(0)" @click="quit"> 退出 </a>
      <!-- 包含用户图像 登录 注册 -->
      <div class="mine-info">
        <!-- 用户图像 -->
        <div class="mine-avatar">
          <img
            src="https://cmsstatic.ffquan.cn//wap_new/user/images/integral/user.png?v=202106041048"
            alt=""
          />
        </div>
        <!-- 登录与注册 -->
        <div class="mine-type">
          <span id="mine-login" class="mine-login" v-if="!username">
            <router-link to="/login">
              <a href="javascript:void(0)">登录</a>
            </router-link>
            <router-link to="register">
              <a href="javascript:void(0)"> 注册 </a>
            </router-link>
          </span>
          <span v-else class="username">
            {{ username }}
          </span>
        </div>
      </div>
      <!-- 主体模块 -->
      <div class="mine-main">
        <!--我的收藏和我的足迹  -->
        <div class="mine-me">
          <!-- 我的收藏 -->

          <a href="javascript:void(0)">
            <img
              src="https://cmsstatic.ffquan.cn//wap_new/user/images/integral/love.png?v=202106041048"
            />
            <span class="mine-span">我的收藏</span>
          </a>
          <!-- 我的足迹 -->
          <a href="javascript:void(0)">
            <img
              src="https://cmsstatic.ffquan.cn//wap_new/user/images/integral/foot.png?v=202106041048"
            />
            <span class="mine-span">我的足迹</span>
          </a>
        </div>
        <!-- 图片 -->
        <a href="" class="mine-pic">
          <img
            src="https://img.alicdn.com/imgextra/i3/2053469401/O1CN01BTBjcQ2JJi6AJd4iX_!!2053469401.jpg"
          />
        </a>

        <!-- 常用工具 -->
        <div class="mine-tools">
          <p class="mine-title">常用工具</p>
          <ul class="mine-toolsContent">
            <!-- <a href="/index.php?r=user/couponhelp">
                            <li class="mine-col">
                                <img src="https://cmsstatic.ffquan.cn//wap_new/user/images/integral/tools1.png?v=202106101527">
                                <span>新手教程</span>
                            </li>
                            </a> -->
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import * as cookie from "@/utils/index";
import { defineComponent, reactive, toRefs, ref } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const showPopover = ref(false);
    interface IActions {
      text: string;
    }
    const actions: IActions[] = [
      { text: "选项一" },
      { text: "选项二" },
      { text: "选项三" },
    ];
    const onSelect = (action: any) => Toast(action.text);

    const state = reactive({
      username: cookie.getCookie("username"),
    });

    const quit = () => {
      cookie.removeCookie("token");
      cookie.removeCookie("username");
      cookie.removeCookie("userId");
      router.go(0);
    };
    return {
      quit,
      ...toRefs(state),
      actions,
      onSelect,
      showPopover,
    };
  },
});
</script>

<style lang="stylus" scoped>
.mine
    height 5.01rem
    width  3.75rem
    .mine-center-info
        width  100%
        height 4.61rem
        z-index 1
        zoom 1
        overflow hidden
        background url(https://cmsstatic.ffquan.cn/wap_new/user/images/user_bg.png?v=2021-06-0) no-repeat #f6f6f6
        background-size  100% 1.95rem
        position relative
        right 0

.mine-set
    color #fff
    font-size .16rem
    position  absolute
    zoom  1
    right  0
    top  0.12rem
    z-index  10
    color  #fff
    width .4rem
    height .25rem
    display block
.mine-info
    width 100%
    height .66rem
    box-sizing border-box
    padding-left 15px
    position relative
    z-index 1
    zoom 1
    margin-top .16rem
    display flex
    .mine-avatar
        width .66rem
        height .66rem
        border-radius 50%
        box-sizing border-box
        position relative
        z-index 1
        zoom 1
        & img
            width .66rem
            height .66rem
            position absolute
            z-index 1
            zoom 1
            left 0
            bottom 0
            right 0
            top 0
            margin auto
.mine-type
    width 2.16rem
    height .66rem
    display flex
    align-items  center
    margin-left  .1rem
    .username
      color #fff
      font-size .2rem
    #mine-login
         display block
         width .88rem
         height .26rem
         display flex
         align-items  center
         font-size  .2rem
         color  white
         display flex
         justify-content space-between
#mine-login a
    color  #fff
    font-weight  500
    font-size  .2rem
    font-family  PingFangSC-Medium
.mine-main
    height  100%
    background  0 0
    margin  .24rem .1rem
    .mine-me
      height  .93rem
      background  #fff
      border-radius  .1rem
      display  flex
      justify-content  space-around
      align-items  center
      box-sizing  border-box

    & img
            width  .34rem
            height  .34rem
.mine-me a
        display block
        display flex
        flex-direction column
        align-items center
        text-decoration none
.mine-span
        /* width  .54rem */
        height  .18rem
        font-size  .13rem
        font-family  PingFangSC-Light
        font-weight  300
        color  #666
        line-height  .18rem
        display  block
.mine-pic
    display block
    margin  .10rem 0
    border-radius  .10rem
    cursor  pointer
    & img
        width  100%
        height  100%
        border-radius  .10rem
        display   block
.mine-tools
    background  #fff
    box-shadow  0 0 .06rem -1rem rgb(0 0 0 / 9%)
    border-radius  .06rem
    margin-top  .10rem
    .mine-title
        height  .35rem
        border-bottom  .01rem solid #EEE
        line-height  .35rem
        padding-left  .15rem
        box-sizing  border-box
        font-size  .14rem
        font-family  PingFangSC-Medium
        font-weight  500
        color  #333
.mine-toolsContent
        box-sizing: border-box;
        padding: 0 .05rem;
        overflow: hidden;
.mine-col
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: .67rem;
        width: 25%;
</style>
